<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12">
        <h2>数据可视化-指标达标率(所有指标)</h2>
        <h4>本图可展示所有指标的达标情况</h4>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <h2>数据可视化-指标达标率(选定指标)</h2>
        <h4>本图可选择并展示某指标的达标情况</h4>
        <el-form :model="queryParamsPie" ref="queryPieForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="指标选择" prop="indeId">
            <el-select
              v-model="queryParamsPie.indeId"
              placeholder="请选择指标名称"
              clearable
              @keyup.enter.native="handleQuery"
              style="width: 240px"
            >
              <el-option
                v-for="item in indeOptions"
                :key="item.indeId"
                :label="item.indeName"
                :value="item.indeId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="年份选择" prop="dataYear">
            <el-select
              v-model="queryParamsPie.dataYear"
              placeholder="请选择年份"
              clearable
              @keyup.enter.native="handleQuery"
              style="width: 240px"
            >
              <el-option
                v-for="item in yearOptions"
                :key="item.dataYear"
                :label="item.dataYear"
                :value="item.dataYear"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryPie">提交</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQueryPie">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <ycpie />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <ycpieparams :ycPieQueryResult="ycPieQueryResult" ref="ycpieparams" />
        </div>
      </el-col>
    </el-row>

<!--    <el-row :gutter="32">-->
<!--      <el-col :xs="24" :sm="24" :lg="24">-->
<!--        <div class="chart-wrapper">-->
<!--          <RaddarChart />-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :xs="24" :sm="24" :lg="24">-->
<!--        <div class="chart-wrapper">-->
<!--          <PieChart />-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :xs="24" :sm="24" :lg="24">-->
<!--        <div class="chart-wrapper">-->
<!--          <BarChart />-->
<!--        </div>-->
<!--      </el-col>-->
<!--    </el-row>-->

    <!--    柱状图选项    -->
    <h2>数据可视化-柱状图(年)</h2>
    <h4>本图可选择并展示属于多个组织的某一指标，在某年中的数据</h4>
    <el-form :model="queryParamsYear" ref="queryYearForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="指标选择" prop="indeId">
        <el-select
          v-model="queryParamsYear.indeId"
          placeholder="请选择指标名称"
          clearable
          @keyup.enter.native="handleQuery"
          style="width: 240px"
        >
          <el-option
            v-for="item in indeYearOptions"
            :key="item.indeId"
            :label="item.indeName"
            :value="item.indeId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="归属组织" prop="orgId">
        <el-select
          v-model="queryParamsYear.orgId"
          multiple
          placeholder="请选择归属组织"
          @keyup.enter.native="handleQuery"

          style="width: 240px"
        >
          <el-option
            v-for="item in orgOptions"
            :key="item.orgId"
            :label="item.orgName"
            :value="item.orgId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="年份选择" prop="dataYear">
        <el-select
          v-model="queryParamsYear.dataYear"
          placeholder="请选择年份"
          clearable
          multiple
          @keyup.enter.native="handleQuery"
          style="width: 240px"
        >
          <el-option
            v-for="item in yearOptions"
            :key="item.dataYear"
            :label="item.dataYear"
            :value="item.dataYear"
          />
        </el-select>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryYear">提交</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQueryYear">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <ycbaryear :ycBarQueryResult="ycYearQueryResult" ref="ycbaryear"/>
    </el-row>


    <!--    柱状图选项    -->
    <h2>数据可视化-柱状图(月、季)</h2>
    <h4>本图可选择并展示属于多个组织的某一指标，在某年多个月份中的数据</h4>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="指标选择" prop="indeId">
        <el-select
          v-model="queryParams.indeId"
          placeholder="请选择指标名称"
          clearable
          @keyup.enter.native="handleQuery"
          style="width: 240px"
        >
          <el-option
            v-for="item in indeOptions"
            :key="item.indeId"
            :label="item.indeName"
            :value="item.indeId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="归属组织" prop="orgId">
        <el-select
          v-model="queryParams.orgId"
          multiple
          placeholder="请选择归属组织"
          @keyup.enter.native="handleQuery"

          style="width: 240px"
        >
          <el-option
            v-for="item in orgOptions"
            :key="item.orgId"
            :label="item.orgName"
            :value="item.orgId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="年份选择" prop="dataYear">
        <el-select
          v-model="queryParams.dataYear"
          placeholder="请选择年份"
          clearable
          @keyup.enter.native="handleQuery"
          style="width: 240px"
        >
          <el-option
            v-for="item in yearOptions"
            :key="item.dataYear"
            :label="item.dataYear"
            :value="item.dataYear"
          />
        </el-select>
      </el-form-item>


      <el-form-item label="月份选择" prop="dataDimension">
        <el-select
          v-model="queryParams.dataDimension"
          multiple
          placeholder="请选择月份"
          @keyup.enter.native="handleQuery"
          style="width: 240px"
        >
          <el-option
            v-for="item in monthOptions"
            :key="item.dataYear"
            :label="item.dataDimension"
            :value="item.dataDimension"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">提交</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <ycbar :ycBarQueryResult="ycBarQueryResult" ref="ycbar"/>
    </el-row>

<!--    折线图选项    -->
    <h2>数据可视化-折线图</h2>
    <h4>本图可选择并展示某一指标，在某年多个月份中的数据趋势</h4>
    <el-form :model="queryParamsLine" ref="queryLineForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="指标选择" prop="indeId">
        <el-select
          v-model="queryParamsLine.indeId"
          placeholder="请选择指标名称"
          clearable

          @keyup.enter.native="handleQuery"
          style="width: 240px"
        >
          <el-option
            v-for="item in indeOptions"
            :key="item.indeId"
            :label="item.indeName"
            :value="item.indeId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="归属组织" prop="orgId">
        <el-select
          v-model="queryParamsLine.orgId"
          placeholder="请选择归属组织"
          multiple
          @keyup.enter.native="handleQuery"

          style="width: 240px"
        >
          <el-option
            v-for="item in orgOptions"
            :key="item.orgId"
            :label="item.orgName"
            :value="item.orgId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="年份选择" prop="dataYear">
        <el-select
          v-model="queryParamsLine.dataYear"
          placeholder="请选择年份"
          clearable
          @keyup.enter.native="handleQuery"
          style="width: 240px"
        >
          <el-option
            v-for="item in yearOptions"
            :key="item.dataId"
            :label="item.dataYear"
            :value="item.dataYear"
          />
        </el-select>
      </el-form-item>


      <el-form-item label="月份选择" prop="dataDimension">
        <el-select
          v-model="queryParamsLine.dataDimension"
          placeholder="请选择月份"
          multiple
          @keyup.enter.native="handleQuery"
          style="width: 240px"
        >
          <el-option
            v-for="item in monthOptions"
            :key="item.dataId"
            :label="item.dataDimension"
            :value="item.dataDimension"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryLine">提交</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQueryLine">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <ycline :ycLineQueryResult="ycLineQueryResult" ref="ycline"/>
    </el-row>

    <!--    折线图选项    -->
    <h2>数据可视化-折线图(指标排名)</h2>
    <h4>本图可选择并展示某个（区/站）级指标，在多个月份中的排名情况</h4>
    <el-form :model="queryParamsLineRanking" ref="queryLineRankingForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="指标选择" prop="indeId">
        <el-select
          v-model="queryParamsLineRanking.indeId"
          placeholder="请选择指标名称"
          clearable

          @keyup.enter.native="handleQuery"
          style="width: 240px"
        >
          <el-option
            v-for="item in indeOptions"
            :key="item.indeId"
            :label="item.indeName"
            :value="item.indeId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="年份选择" prop="dataYear">
        <el-select
          v-model="queryParamsLineRanking.dataYear"
          placeholder="请选择年份"
          clearable
          @keyup.enter.native="handleQuery"
          style="width: 240px"
        >
          <el-option
            v-for="item in yearOptions"
            :key="item.dataId"
            :label="item.dataYear"
            :value="item.dataYear"
          />
        </el-select>
      </el-form-item>


      <el-form-item label="月份选择" prop="dataDimension">
        <el-select
          v-model="queryParamsLineRanking.dataDimension"
          placeholder="请选择月份"
          multiple
          @keyup.enter.native="handleQuery"
          style="width: 240px"
        >
          <el-option
            v-for="item in monthOptions"
            :key="item.dataId"
            :label="item.dataDimension"
            :value="item.dataDimension"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryLineRanking">提交</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQueryLineRanking">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <yclineranking :ycLineRankingQueryResult="ycLineRankingQueryResult" ref="yclineranking"/>
    </el-row>

  </div>
</template>

<script>
import { listInde, getInde, delInde, addInde, updateInde } from "@/api/system/inde";
import { ycindeSelect,ycindeSelectByYear } from "@/api/system/inde";
import {ycdatamonthSelect, ycdatayearSelect} from "@/api/system/data"
import {ycorgSelect} from "@/api/system/org";
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/linechart/linechart'
import PieChart from './dashboard/piechart/piechart'
import BarChart from './dashboard/barchart/barchart'
import ycpie from './dashboard/ycpie/ycpie'
import ycpieparams from "./dashboard/ycpie/ycpieparams";
import ycbar from "@/views/dashboard/ycbar/ycbar";
import ycline from "@/views/dashboard/ycline/ycline";
import ycbaryear from "@/views/dashboard/ycbar/ycbaryear";
import yclineranking from "./dashboard/ycline/yclineranking";

export default {
  name: 'Index',
  components: {
    ycpie,
    ycpieparams,
    PanelGroup,
    LineChart,
    PieChart,
    BarChart,
    ycbar,
    ycline,
    ycbaryear,
    yclineranking,
  },
  data() {

    return {
      ycBarQueryResult: {
        indeId:null,
        orgId: null,
        dataYear:null,
        dataDimension:null,
      },

      ycLineQueryResult: {
        indeId:null,
        orgId: null,
        dataYear:null,
        dataDimension:null,
      },

      ycLineRankingQueryResult: {
        indeId:null,
        dataYear:null,
        dataDimension:null,
      },

      ycYearQueryResult: {
        indeId:null,
        orgId: null,
        dataYear:null,
      },
      ycPieQueryResult: {
        indeId:null,
        dataYear:null,
      },

      //部门
      orgOptions:[],
      indeOptions:[],
      indeYearOptions:[],
      monthOptions:[],
      yearOptions:[],
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        indeCode: null,
        indeId: null,
        indeFlag: null,
        indeUnit: null,
        indeDimension: null,
        flagArea: null,
        indeLevel: null,
        deptId: null,
        orgId: null,
        dataYear:null,
        dataDimension:null,
        dataValue: null,
        orgName: null
      },

      queryParamsYear: {
        pageNum: 1,
        pageSize: 10,
        indeCode: null,
        indeId: null,
        indeFlag: null,
        indeUnit: null,
        indeDimension: null,
        flagArea: null,
        indeLevel: null,
        deptId: null,
        orgId: null,
        dataYear:null,
        dataDimension:null,
        dataValue: null,
        orgName: null
      },

      // 查询参数
      queryParamsLine: {
        pageNum: 1,
        pageSize: 10,
        indeCode: null,
        indeId: null,
        indeFlag: null,
        indeUnit: null,
        indeDimension: null,
        flagArea: null,
        indeLevel: null,
        deptId: null,
        orgId: null,
        dataYear:null,
        dataDimension:null,
        dataValue: null,
        orgName: null
      },

      // 查询参数
      queryParamsLineRanking: {
        pageNum: 1,
        pageSize: 10,
        indeCode: null,
        indeId: null,
        indeFlag: null,
        indeUnit: null,
        indeDimension: null,
        flagArea: null,
        indeLevel: null,
        deptId: null,
        orgId: null,
        dataYear:null,
        dataDimension:null,
        dataValue: null,
        orgName: null
      },

      // 查询参数
      queryParamsPie: {
        pageNum: 1,
        pageSize: 10,
        indeCode: null,
        indeId: null,
        indeFlag: null,
        indeUnit: null,
        indeDimension: null,
        flagArea: null,
        indeLevel: null,
        deptId: null,
        orgId: null,
        dataYear:null,
        dataDimension:null,
        dataValue: null,
        orgName: null
      },

      // 表单参数
      form: {
      },
    }
  },
  created() {
    this.getList();
    this.getOrgSelect();
    this.getIndeSelect();
    this.getIndeSelectByYear();
    this.getDataYear();
    this.getDataMonth();
  },
  methods: {
    getOrgSelect(){
      ycorgSelect().then(response =>{
        this.orgOptions = response.data;
      })
    },
    getIndeSelect(){
      ycindeSelect().then(response =>{
        this.indeOptions = response.data;
      })
    },
    getIndeSelectByYear(){
      ycindeSelectByYear().then(response =>{
        this.indeYearOptions = response.data;
      })
    },
    getDataYear(){
      ycdatayearSelect().then(response =>{
        this.yearOptions = response.data;
      })
    },
    getDataMonth(){
      ycdatamonthSelect().then(response =>{
        this.monthOptions = response.data;
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      let indeId = this.queryParams.indeId;
      let orgId = this.queryParams.orgId;
      let dataYear = this.queryParams.dataYear;
      let dataDimension = this.queryParams.dataDimension;
      this.ycBarQueryResult.orgId = orgId;
      this.ycBarQueryResult.indeId = indeId;
      this.ycBarQueryResult.dataYear = dataYear;
      this.ycBarQueryResult.dataDimension = dataDimension;
      // console.log("在index_v1的ycBarQueryResult" )
      // console.log(this.ycBarQueryResult)
    },

    /** 线状图搜索按钮操作 */
    handleQueryLine() {
      let indeId = this.queryParamsLine.indeId;
      let orgId = this.queryParamsLine.orgId;
      let dataYear = this.queryParamsLine.dataYear;
      let dataDimension = this.queryParamsLine.dataDimension;
      this.ycLineQueryResult.orgId = orgId;
      this.ycLineQueryResult.indeId = indeId;
      this.ycLineQueryResult.dataYear = dataYear;
      this.ycLineQueryResult.dataDimension = dataDimension;
      // console.log("在index_v1的ycLineQueryResult" )
      // console.log(this.ycLineQueryResult)
    },

    /** 线状图搜索按钮操作 */
    handleQueryLineRanking() {
      let indeId = this.queryParamsLineRanking.indeId;
      let dataYear = this.queryParamsLineRanking.dataYear;
      let dataDimension = this.queryParamsLineRanking.dataDimension;
      this.ycLineRankingQueryResult.indeId = indeId;
      this.ycLineRankingQueryResult.dataYear = dataYear;
      this.ycLineRankingQueryResult.dataDimension = dataDimension;
      console.log("------------------------------在index_v1的ycLineRankingQueryResult" )
      console.log(this.ycLineRankingQueryResult)
    },

    /** 线状图搜索按钮操作 */
    handleQueryYear() {
      let indeId = this.queryParamsYear.indeId;
      let orgId = this.queryParamsYear.orgId;
      let dataYear = this.queryParamsYear.dataYear;
      this.ycYearQueryResult.orgId = orgId;
      this.ycYearQueryResult.indeId = indeId;
      this.ycYearQueryResult.dataYear = dataYear;
      // console.log("在index_v1的ycYearQueryResult" )
      // console.log(this.ycYearQueryResult)
    },

    /** 饼状图搜索按钮操作 */
    handleQueryPie() {
      let indeId = this.queryParamsPie.indeId;
      let dataYear = this.queryParamsPie.dataYear;
      this.ycPieQueryResult.indeId = indeId;
      this.ycPieQueryResult.dataYear = dataYear;
      // console.log("在index_v1的ycPieQueryResult" )
      // console.log(this.ycPieQueryResult)
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.pageNum = 1;
      this.$refs.ycbar.emptyChart();
    },

    /** 重置按钮操作 */
    resetQueryLine() {
      this.resetForm("queryLineForm");
      this.queryParamsLine.pageNum = 1;
      this.$refs.ycline.emptyChart();
    },

    /** 重置按钮操作 */
    resetQueryLineRanking() {
      this.resetForm("queryLineRankingForm");
      this.queryParamsLineRanking.pageNum = 1;
      this.$refs.yclineranking.emptyChart();
    },

    /** 重置按钮操作 */
    resetQueryYear() {
      this.resetForm("queryYearForm");
      this.queryParamsYear.pageNum = 1;
      this.$refs.ycbaryear.emptyChart();
    },

    /** 重置按钮操作 */
    resetQueryPie() {
      this.resetForm("queryPieForm");
      this.queryParamsPie.pageNum = 1;
      this.$refs.ycpieparams.emptyChart();
    },

    /** 查询部门管理列表 */
    getList() {
      this.loading = true;
      listInde(this.queryParams).then(response => {
        this.indeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 10px 32px 32px 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
